<template>
    <div>
        <city-header></city-header>
        <citySearch :cities='cities'></citySearch>
        <cityList :cities='cities' :hot='hotCities' :letter='letter'></cityList>
        <city-letter :cities='cities' @change='handleNew'></city-letter>
    </div>
</template>
<script>
import axios from 'axios'
import cityHeader from './pages/cityHeader.vue'
import citySearch from './pages/citySearch'
import cityList from './pages/cityList'
import cityLetter from './pages/cityLetter'
export default {
  components: {
    cityHeader,
    citySearch,
    cityList,
    cityLetter
  },
  data(){
    return {
      cities: {},
      hotCities: [],
      letter: ''
    }
  },
  methods:{
    getCityInfo(){
      axios.get('/api/city.json')
        .then(this.handleCityInfoSucc)
    },
    handleCityInfoSucc(res){
      res = res.data;
      if(res.ret && res.data){
        const data = res.data;
        this.cities = data.cities;
        this.hotCities = data.hotCities;
      }
    },
    handleNew(letter){
        this.letter = letter;
    }
  },
  mounted(){
    this.getCityInfo()
  },

}
</script>
<style lang="stylus" scoped>
</style>
